<template>
	<view v-if="scenicInfo!=''"  class="container"> 
		<view class="scrbox" style="z-index: 2;'">
			<scroll-view class="scrollbox" scroll-with-animation="true" scroll-x="true" :scroll-left="tabLeft">
				<view class="tabbox">
					<view :class="{ 'tabbox-tab': true, 'tab-filled': item.filled }" v-for="(item, index) of tabList" :key="index" @click="pageScroll(index)">{{ item.title }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="artbox" style="margin-top: 50px;">
			<view class="article" v-for="(item, index) of tabList" :key="index">
				<!-- 开放时间 -->
				<view v-if="index==0">
					<view class="article-title">{{ item.title }}</view>
					<view class="centent-list">
						<view v-if="scenicInfo.open_time"   class="">
							<view class="" v-if="item.date&&item.time" v-for="(item,index2) in scenicInfo.open_time" :key="index2">
								<view class="open-time-date">{{item.date}}</view>
								<view class="open-time-box">
									<view class="open-time-time" :class="index2==(scenicInfo.open_time.length-1)?'last-time':'last-time2'">{{item.time}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="open-time-tips">
						{{scenicInfo.open_time_desc}}
					</view>
					<view class="open-time-notice">
						* 以上信息仅供参考，具体以景区当日公示信息为准
					</view>
				</view>
				
				<!-- 开放时间 -->
				<!-- 优惠政策 -->
				<view v-if="index==1">
					<view class="article-title">{{ item.title }}</view>
					<view class="centent-list">
						<view v-html="scenicInfo.special_policy"></view>
					</view>
				</view>
				<!-- 优惠政策 -->
				<!-- 游玩须知 -->
				<view v-if="index==2">
					<view class="article-title">{{ item.title }}</view>
					<view v-if="scenicInfo.scenic_help" class="centent-list">
						<view class="" v-html="scenicInfo.scenic_help"></view>
					</view>
					<view v-if="scenicInfo.scenic_facility.length" class="article-title">景区设施</view>
					<u-grid class="centent-list" :col="4" :border="false">
						<u-grid-item v-for="(item,index2) in scenicInfo.scenic_facility" :key="index2" >
							<image :src="item.image"  style="width: 60px;height: 60px;"></image>
							<view class="grid-text">{{item.text}}</view>
						</u-grid-item>
					</u-grid>
					<view v-if="scenicInfo.scenic_park" class="centent-list">
						<view v-html="scenicInfo.scenic_park"></view>		
					</view>
					<view v-if="scenicInfo.to_scenic" class="article-title">交通信息</view>
					<view v-if="scenicInfo.to_scenic" class="centent-list">
						<view v-html="scenicInfo.to_scenic"></view>		
					</view>
				</view>
				<!-- 游玩须知 -->
				<!-- 景点介绍 -->
				<view v-if="index==3&&scenicInfo.scenic_detail">
					<view class="article-title">{{ item.title }}</view>
					<view class="centent-list">
						<view style="width: 100%;overflow: hidden;" v-html="scenicInfo.scenic_detail"></view>		
					</view>
				</view>
				<!-- 景点介绍 -->
			</view>
		</view>
	</view>
</template>

<script>
	import {getScenicDetail} from '@/api/store'
	
export default {
	data() {
		return {
			tabList: [], 
			scrollList: [], // 文章的滚动参数
			scrollLeftList: [], // tab栏滚动参数
			arcHeight: 0, // 文章滚动区域高度
			arcWidth: 0, // tab栏滚动区域宽度
			tabLeft: 0, // 控制tab栏滚动位置
			isRun: false ,// 是否正在滚动
			height:'',
			scenicInfo:'',
		};
	},
	onLoad(options) {
		this.getDetail(options.id)
		
		let that = this;
		uni.getSystemInfo({
			success: function(res) {
				// 获取可使用窗口宽度
				let clientHeight = res.windowHeight;
				// 获取可使用窗口高度
				let clientWidth = res.windowWidth;
				// 算出比例
				let ratio = 750 / clientWidth;
				// 算出高度(单位rpx)
				let height = clientHeight * ratio;
				// 设置高度
				that.arcHeight = clientHeight - 55;
				that.arcWidth = clientWidth - 20;
				that.height = res.statusBarHeight + 44;
			}
		});
		
	},
	onPageScroll(e) {
		let that = this;
		// 防止在滚动过程中多次触发事件
		if (that.isRun) {
			return;
		}
		// 如果某一个元素接近顶部,触发tab切换效果
		for (let i = 0; i < that.scrollList.length; i++) {
			if (e.scrollTop + 50 >= that.scrollList[i] && e.scrollTop - 50 <= that.scrollList[i]) {
				that.tabClick(i);
				return;
			}
		}
	},
	methods: {
		getDetail(id){
			uni.showLoading({
				title:'请稍后···'
			})
			getScenicDetail(id).then(res => {
				uni.hideLoading()
				this.scenicInfo = res.data
				this.tabList = [
					{
						title: '开放时间',
						filled: true,
						id: '#atc1',
						data:''
					},
					{
						title: '优惠政策',
						filled: false,
						id: '#atc2',
						data:''
					},
					{
						title: '游玩须知',
						filled: false,
						id: '#atc3',
						data:''
					},
					{
						title: '景点介绍',
						filled: false,
						id: '#atc4',
						data:''
					},
				
				]
			    this.initTab();
			})
		},
		initTab() {
			let that = this;

			// 获取渲染完成后的各个元素滚动参数
			setTimeout(function() {
				// 文章列表参数
				const query = uni.createSelectorQuery();
				query.selectAll('.artbox > .article').boundingClientRect();
				query.exec(function(res) {
					console.log(res[0]);
					let items = res[0];
					let scrollList = [];
					for (let i in items) {
						let nowS = 0;
						nowS = items[i].top - 45;
						scrollList.push(nowS);
					}
					that.scrollList = scrollList;
					console.log(scrollList);
				});

				// tab栏参数
				const query2 = uni.createSelectorQuery();
				query2.selectAll('.tabbox > .tabbox-tab').boundingClientRect();
				query2.exec(function(res) {
					console.log(res[0]);
					let items = res[0];
					let scrollLeftList = [];
					for (let i in items) {
						let nowS = 0;
						nowS = items[i].left - 10;
						scrollLeftList.push(nowS);
					}
					that.scrollLeftList = scrollLeftList;
				});
			}, 100);
		},

		// 点击tab栏
		pageScroll(index) {
			let that = this;

			if (that.isRun) {
				return;
			}

			that.tabClick(index);
			that.isRun = true;

			// 滚动到指定文章的高度
			uni.pageScrollTo({
				scrollTop: that.scrollList[index],
				complete: function() {
					that.isRun = false;
				}
			});
		},

		// 改变tab栏显示参数
		tabClick(index) {
			let that = this;
			let arr = that.tabList;
			arr.map(item => {
				item.filled = false;
			});
			arr[index].filled = true;
			that.tabList = arr;
			let nowleft = (that.arcWidth - 80) / 2; // 加入一点左边距，这样就不会贴着左边
			that.tabLeft = that.scrollLeftList[index] - nowleft;
		}
	}
};
</script>

<style lang="scss">
page{
	background-color: #FFFFFF;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.scrbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #ffffff;
}

.scrollbox {
	width: 100vw;
	box-sizing: border-box;
	.tabbox {
		display: flex;
		flex-wrap: nowrap;
		box-sizing: content-box;
		background-color: #fff;
		height: 44px;
		.tabbox-tab {
			font-size: 14px;
			flex: 1;
			display: flex;
		    position: relative;
			align-items: center;
			justify-content: center;
		}
	}
}
.tab-filled{
	color: #23beae;
}
.tab-filled:before {
		position: absolute;
		width: 60rpx;
		height: 10rpx;
		background-repeat: no-repeat;
		content: "";
		background-image: linear-gradient(to right, #007AFF 0%, #bfe7d9 100%);
		bottom: -10rpx;
		left: 50%;
		margin-left: -28rpx;
		top: 35px;
		border-radius: 4px;
	}

.tabox-tab:first-child {
	margin-left: 0;
}

.article {
	margin: 15px;
	.article-title {
	    font-weight: 600;
	    font-size: 17px;
	    color: #333;
	}
}
.centent-list {
    margin-top: 12px;
    padding: 0 12px;
}
.open-time-date {
    border-radius: 4px 4px 0 0;
	background: #eef1f6;
	font-size: 15px;
	color: #666;
	line-height: 20px;
	padding: 12px;
	}
	
.open-time-time {
	padding: 12px;
	font-size: 14px;
	color: #333;
	line-height: 20px;
	border: 1px solid #dde4ed;
	border-top: none;
}
 .open-time-time.last-time2 {
    border-bottom: none;
}

.open-time-time.last-time {
    border-radius: 0 0 4px 4px;
    border-bottom: 1px solid #dde4ed;
}
.open-time-tips {
    margin: 16px 12px 0;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    line-height: 19px;
}
 .open-time-notice {
    margin-top: 16px;
    padding: 0 12px;
    font-size: 11px;
    color: #999;
    line-height: 21px;
}
</style>
